<template>
    <div class="inputDev">
        <Select v-model="ipType" :transfer='transfer' size="small" @on-change='changeSelect'>
            <Option value="0" :key="0">ANY</Option>
            <Option value="1" :key="1">{{$t('safeplot.sIp')}}</Option>
            <Option value="2" :key="2">{{$t('safeplot.sIp')}}/{{$t('safeplot.sMask')}}</Option>
            <Option value="3" :key="3">{{$t('safeplot.sIpRang')}}</Option>
        </Select>
        <template v-if='ipType=="1"'>
            <input type="text" class="ip_a" v-model='iptable_a.f' @blur='test()' onkeyup="value=value.replace(/[^\d.]/g,'')">
            <span class="warning">{{ipMsg1}}</span>
        </template>
        <template v-if='ipType=="2"'>
            <input type="text" v-model='iptable_b.f' class="ip_b" @blur='test()' onkeyup="value=value.replace(/[^\d.]/g,'')">
            /
            <input type="text" v-model='iptable_b.s' class="ip_c" @blur='test()' onkeyup="value=value.replace(/[^\d.]/g,'')">
            <span class="warning">{{ipMsg2}}</span>
        </template>    
        <template v-if='ipType=="3"'>
            <input type="text" v-model="iptable_c.f" class="ip_d" @blur='test()' onkeyup="value=value.replace(/[^\d.]/g,'')">
            -
            <input type="text" v-model='iptable_c.s' class="ip_e" @blur='test()' onkeyup="value=value.replace(/[^\d.]/g,'')">
            <span class="warning">{{ipMsg3}}</span>
        </template>   
        					
    </div>
</template>
<script>
    import formatTest from 'libs/formatTest'
    export default {
        props: {
            special: {
                
            },
            listener: {

            }
        },   
        data() {
            return {
                transfer: true,
                ipType: '0',
                ipVal: this.special,
                iptable_a: {f: ''},
                iptable_b: {f: '', s: ''},
                iptable_c: {f: '', s: ''},
                ipMsg1: '',
                ipMsg2: '',
                ipMsg3: '',
                valid: false
            }
        },
        watch: {
            listener:function() {
                this.iptable_a={f:''}
                this.iptable_b={f:'',s:''}
                this.iptable_c={f:'',s:''}
                if (this.special==undefined||this.special=='') {
                    this.ipType='0'
                    return 
                }
                if (this.special.indexOf('/')>0) {
                    this.iptable_b.f = this.special.split('/')[0]
                    this.iptable_b.s = this.special.split('/')[1]
                    this.ipType='2'
                    return 
                }
                if (this.special.indexOf('-')>0) {
                    this.iptable_c.f = this.special.split('-')[0]
                    this.iptable_c.s = this.special.split('-')[1]
                    this.ipType='3'
                    return 
                }
                this.iptable_a.f = this.special
                this.ipType='1'
                return
            }, 
        },
        mounted() {
       
        },
        methods: {
            emitUnvalidStatus() {
                let sendip = {
                    ip: '',
                    status: false
                }
                this.$emit('sendip',sendip)
            },
            test() {
                let IPReg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/
                if (this.ipType === '0') {
                    let sendip = {
                        ip: '',
                        status: true
                    }
                    this.$emit('sendip', sendip)
                    return
                }
                if (this.ipType === '1') {
                    let ip = this.iptable_a.f
                    if (!String(ip)) {
                        this.ipMsg1 = this.$t('safeplot.inputBlank')
                        this.emitUnvalidStatus()
                    } else {
                        if (!IPReg.test(ip)) {
                            this.ipMsg1 = this.$t('safeplot.inputNotice1') 
                            this.emitUnvalidStatus()
                        } else {
                            this.ipMsg1 = ''
                            let sendip = {
                                ip: ip,
                                status: true
                            }
                            this.$emit('sendip', sendip)
                        }
                    }

                    
                }
                if (this.ipType === '2') {
                    let ip = String(this.iptable_b.f)
                    // 掩码
                    let mask = String(this.iptable_b.s)

                    if (!ip && !mask) {
                        this.ipMsg2 = this.$t('safeplot.inputBlank')
                        this.emitUnvalidStatus()
                        return
                    }

                    if (ip) {
                        if (!IPReg.test(ip)) {
                            this.ipMsg2 = this.$t('safeplot.inputNotice1') 
                            this.emitUnvalidStatus()
                            return
                        }
                    } else {
                        this.ipMsg2 = this.$t('safeplot.ipBlank') 
                        this.emitUnvalidStatus()
                        return
                    }

                    if (!mask) {
                        this.ipMsg2 = this.$t('safeplot.inputNotice2')
                        this.emitUnvalidStatus()
                        return
                    } else {
                        if (!(mask > 0 && mask < 33)) {
                            this.ipMsg2 = this.$t('safeplot.inputNotice3')
                            this.emitUnvalidStatus()
                            return
                        }
                    }
                    
                    this.ipMsg2 = ''
                    let ipMask = ip + '/' + mask
                    let sendip = {
                        ip: ipMask,
                        status: true
                    }
                    this.$emit('sendip', sendip)
                    return
                }
                if (this.ipType === '3') {
                    let ip1 = String(this.iptable_c.f)
            
                    let ip2 = String(this.iptable_c.s)

                    if (!ip1 && !ip2) {
                        this.ipMsg3 = this.$t('safeplot.inputBlank')
                        this.emitUnvalidStatus()
                        return
                    }

                    if (ip1) {
                        if (!IPReg.test(ip1)) {
                            this.ipMsg3 = this.$t('safeplot.inputNotice1') 
                            this.emitUnvalidStatus()
                            return
                        }
                    } else {
                        this.ipMsg3 = this.$t('safeplot.ipBlank') 
                        this.emitUnvalidStatus()
                        return
                    }

                    if (ip2) {
                        if (!IPReg.test(ip2)) {
                            this.ipMsg3 = this.$t('safeplot.inputNotice1') 
                            this.emitUnvalidStatus()
                            return
                        }
                    } else {
                        this.ipMsg3 = this.$t('safeplot.ipBlank') 
                        this.emitUnvalidStatus()
                        return
                    }
                    
                    this.ipMsg3 = ''
                    let ip = ip1 + '-' + ip2
                    let sendip = {
                        ip: ip,
                        status: true
                    }
                    this.$emit('sendip', sendip)
                    return
                }
            },
            changeSelect() {
               this.test()
            }
        }
    }
</script>
<style scoped>
.warning {
    display: inline-block
}
.inputDev{
    display: inline-block
}
</style>